<!--客户修改个人信息-->
<template>
  <div>

    <el-form ref="customerInfo" :model="customerInfo" label-width="80px" style="width: 500px;
    margin: 20px auto">
      <el-form-item label="姓名">
        <el-input v-model="customerInfo.cname"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="customerInfo.idCard"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="customerInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="customerInfo.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="总消费">
        <span>{{customerInfo.totalmoney}}￥</span>
      </el-form-item>
      <el-form-item label="头像">
        <img :src="customerInfo.headImage" alt="图片不存在" style="width: 30%;height: 30%;">
      </el-form-item>
    </el-form>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://localhost:8000/file-serv/upload"
      name="files"
      :on-success="handleSuccess"
      :auto-upload="true"
      :headers="headers"
    >
      <el-button slot="trigger" size="small" type="primary" icon="el-icon-folder">上传头像</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="modifyInfo()"
        icon="el-icon-circle-check">保存
      </el-button>
    </el-upload>
  </div>
</template>
<script>
import {getCustomerInfo, modifyInfo, handleSuccess} from "../api/customerModifyInfo";

export default {
  data() {
    return {
      customerInfo: {},
      headers: {token: sessionStorage.getItem("token")},
      action: ''
    }
  },
  methods: {
    //查询客户个人信息
    getCustomerInfo() {
      getCustomerInfo(sessionStorage.getItem("phone")).then(res => {
        this.customerInfo = res.data.data;
      })
    },
    //修改个人信息
    modifyInfo() {
      this.$refs.upload.submit()
      modifyInfo(
        this.customerInfo
      ).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功")
        } else {
          this.$message.error("修改失败")
        }
      })
    },
    handleSuccess(data) {
      this.customerInfo.headImage = data;//将url设置到userForm中
      //向服务器发请求，将包含了url和修改后的信息的用户对象传递给服务器，服务器进行数据库保存
      handleSuccess(
        this.customerInfo
      ).then(res => {
        if (res.data.code == 200) {
          this.$message.success("上传成功");
        } else {
          this.$message.error("上传失败");
        }
      })
    }
  },
  mounted() {
    this.getCustomerInfo();
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
